<template>
  <div>
    <!--图片轮播组件-->
    <div class="layui-fulid swiper swiperBox" v-swiper:swiper="swiperOption" ref="swiperBox" @mouseenter="stopSwiper" @mouseleave="startSwiper">
      <div class="swiper-wrapper layui-carousel house-carousel">
        <div class="swiper-slide" v-for="(banner,i) in banners" :key="i">
          <img :src="banner">
        </div>
      </div>
      <div class="swiper-pagination"  slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </div>

    <div class="layui-container">
      <div class="hot-cate">
        <p class="house-title">热门分类</p>
        <div class="layui-row">
          <div class="layui-col-xs4 cateFir cate">
            <a href="javascript:void(0);">
              <img src="~/assets/static/img/home_img1.png">
              <div>
                <p>家居用品</p>
                <span>18元起</span>
              </div>
            </a>
          </div>
          <div class="layui-col-xs4 cateSec cate">
            <a href="javascript:void(0);">
              <img src="~/assets/static/img/home_img2.png">
              <div>
                <p>小家电</p>
                <span>59元起</span>
              </div>
            </a>
          </div>
          <div class="layui-col-xs4 cateThir cate">
            <a href="javascript:void(0);">
              <img src="~/assets/static/img/home_img3.png">
              <div>
                <p>洗护用品</p>
                <span>18元起</span>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="hot-sell">
        <p class="house-title">热销推荐<a href="">更多优品  &gt;</a></p>
        <div class="layui-row layui-col-space20">
          <a href="javascript:void(0);" class="layui-col-xs3 text">
            <div><img src="~/assets/static/img/home_img4.jpg"></div>
            <p>一盏好看的台灯</p>
            <p class="price">￥200</p>
          </a>
          <a href="javascript:void(0);" class="layui-col-xs3 text">
            <div><img src="~/assets/static/img/home_img5.jpg"></div>
            <p>时尚瓷碗7件套</p>
            <p class="price">￥200</p>
          </a>
          <a href="javascript:void(0);" class="layui-col-xs3 text">
            <div><img src="~/assets/static/img/home_img6.jpg"></div>
            <p>智能电吹风</p>
            <p class="price">￥200</p>
          </a>
          <a href="javascript:void(0);" class="layui-col-xs3 text">
            <div><img src="~/assets/static/img/home_img7.jpg"></div>
            <p>一盏好看的台灯</p>
            <p class="price">￥200</p>
          </a>
        </div>
      </div>
      <div class="hot-sell">
        <p class="house-title">新品推荐<a href="">更多优品  &gt;</a></p>
        <div class="layui-row layui-col-space20">
          <a href="javascript:void(0);" class="layui-col-xs3 text">
            <div><img src="~/assets/static/img/home_img8.jpg"></div>
            <p>蒂芙尼蓝化妆刷</p>
            <p class="price">￥200</p>
          </a>
          <a href="javascript:void(0);" class="layui-col-xs3 text">
            <div><img src="~/assets/static/img/home_img9.jpg"></div>
            <p>玻璃洗漱三件套</p>
            <p class="price">￥200</p>
          </a>
          <a href="javascript:void(0);" class="layui-col-xs3 text">
            <div><img src="~/assets/static/img/home_img10.jpg"></div>
            <p>清洁力强劲浴球</p>
            <p class="price">￥200</p>
          </a>
          <a href="javascript:void(0);" class="layui-col-xs3 text">
            <div><img src="~/assets/static/img/home_img11.jpg"></div>
            <p>瘦脸仪</p>
            <p class="price">￥200</p>
          </a>
        </div>
      </div>
    </div>

    <div class="layui-fulid" id="goodsAll"></div>

    <div class="layui-container">
      <div class="hot-sell">
        <p class="house-title">猜您喜欢<a href="">更多新品  &gt;</a></p>
        <div class="layui-row layui-col-space20">
          <a href="javascript:void(0);" class="layui-col-xs3 text">
            <div><img src="~/assets/static/img/home_img12.jpg"></div>
            <p>森系小清新四件套</p>
            <p class="price">￥200</p>
          </a>
          <a href="javascript:void(0);" class="layui-col-xs3 text">
            <div><img src="~/assets/static/img/home_img13.jpg"></div>
            <p>森系小清新四件套</p>
            <p class="price">￥200</p>
          </a>
          <a href="javascript:void(0);" class="layui-col-xs3 text">
            <div><img src="~/assets/static/img/home_img14.jpg"></div>
            <p>森系小清新四件套</p>
            <p class="price">￥200</p>
          </a>
          <a href="javascript:void(0);" class="layui-col-xs3 text">
            <div><img src="~/assets/static/img/home_img15.jpg"></div>
            <p>森系小清新四件套</p>
            <p class="price">￥200</p>
          </a>
          <a href="javascript:void(0);" class="layui-col-xs3 text">
            <div><img src="~/assets/static/img/home_img12.jpg"></div>
            <p>森系小清新四件套</p>
            <p class="price">￥200</p>
          </a>
          <a href="javascript:void(0);" class="layui-col-xs3 text">
            <div><img src="~/assets/static/img/home_img13.jpg"></div>
            <p>森系小清新四件套</p>
            <p class="price">￥200</p>
          </a>
          <a href="javascript:void(0);" class="layui-col-xs3 text">
            <div><img src="~/assets/static/img/home_img14.jpg"></div>
            <p>森系小清新四件套</p>
            <p class="price">￥200</p>
          </a>
          <a href="javascript:void(0);" class="layui-col-xs3 text">
            <div><img src="~/assets/static/img/home_img15.jpg"></div>
            <p>森系小清新四件套</p>
            <p class="price">￥200</p>
          </a>
          <a href="javascript:void(0);" class="layui-col-xs3 text">
            <div><img src="~/assets/static/img/home_img12.jpg"></div>
            <p>森系小清新四件套</p>
            <p class="price">￥200</p>
          </a>
          <a href="javascript:void(0);" class="layui-col-xs3 text">
            <div><img src="~/assets/static/img/home_img13.jpg"></div>
            <p>森系小清新四件套</p>
            <p class="price">￥200</p>
          </a>
          <a href="javascript:void(0);" class="layui-col-xs3 text">
            <div><img src="~/assets/static/img/home_img14.jpg"></div>
            <p>森系小清新四件套</p>
            <p class="price">￥200</p>
          </a>
          <a href="javascript:void(0);" class="layui-col-xs3 text">
            <div><img src="~/assets/static/img/home_img15.jpg"></div>
            <p>森系小清新四件套</p>
            <p class="price">￥200</p>
          </a>
          <a href="javascript:void(0);" class="layui-col-xs3 text">
            <div><img src="~/assets/static/img/home_img12.jpg"></div>
            <p>森系小清新四件套</p>
            <p class="price">￥200</p>
          </a>
          <a href="javascript:void(0);" class="layui-col-xs3 text">
            <div><img src="~/assets/static/img/home_img13.jpg"></div>
            <p>森系小清新四件套</p>
            <p class="price">￥200</p>
          </a>
          <a href="javascript:void(0);" class="layui-col-xs3 text">
            <div><img src="~/assets/static/img/home_img14.jpg"></div>
            <p>森系小清新四件套</p>
            <p class="price">￥200</p>
          </a>
          <a href="javascript:void(0);" class="layui-col-xs3 text">
            <div><img src="~/assets/static/img/home_img15.jpg"></div>
            <p>森系小清新四件套</p>
            <p class="price">￥200</p>
          </a>
        </div>
      </div>
    </div>

    <div class="layui-fulid" id="champ">
      <div class="layui-row">
        <a href="javascript:void(0);" class="layui-col-xs3">
          <img src="~/assets/static/img/home_img16.jpg">
        </a>
        <a href="javascript:void(0);" class="layui-col-xs6">
          <img src="~/assets/static/img/home_img17.jpg">
        </a>
        <a href="javascript:void(0);" class="layui-col-xs3">
          <img src="~/assets/static/img/home_img20.jpg">
        </a>
        <a href="javascript:void(0);" class="layui-col-xs3">
          <img src="~/assets/static/img/home_img18.jpg">
        </a>
        <a href="javascript:void(0);" class="layui-col-xs3">
          <img src="~/assets/static/img/home_img19.jpg">
        </a>
        <a href="javascript:void(0);" class="layui-col-xs3">
          <img src="~/assets/static/img/home_img21.jpg">
        </a>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    data(){
      return {
        banners: ['banner.jpg','banner_small.jpg'],
        // 所有配置均为可选（同Swiper配置）
        swiperOption: {
          loop: true,
          speed:500,
          //notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，
          //也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，
          //那么这个属性一定要是true
          notNextTick: true,
          slidesPerView: 'auto',
          centeredSlides: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          on: {
            slideChange() {
              // console.log('onSlideChangeEnd', this);
            },
            tap() {
              // console.log('onTap', this);
            }
          },
          autoplay: {
            delay: 3500,
            disableOnInteraction: false,
          },
          autoplayDisableOnInteraction:false,
          // effect:'cube',
          //mousewheel: true, 鼠标滚轮切换图片
          preloadImages: false,
          lazy: true
        }
      }
    },
    swiper() {
      //如果你需要得到当前的swiper对象来做一些事情，
      //你可以像下面这样定义一个方法属性来获取当前的swiper对象，
      //同时notNextTick必须为true
      return this.$refs.swiperBox.swiper
    },
    methods:{
      stopSwiper(){
        this.swiper.autoplay.stop()
      },
      startSwiper(){
        this.swiper.autoplay.start()
      }
    }
  }

</script>
